<template>
  <el-col :span="4">
    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" theme="white" v-for="(item, index) in items">
      <el-submenu v-if="item.values">
        <template slot="title">{{item.name}}</template>
        <el-menu-item index="1-1">
          <router-link :to="'/' + item.values[0].ad">{{item.values[0].name}}</router-link>
        </el-menu-item>
        <el-menu-item index="1-2">
          <router-link :to="'/' + item.values[1].ad">{{item.values[1].name}}</router-link>
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else >
        <router-link :to="'/' + item.ad">{{item.name}}</router-link>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>

<script>
  export default {
  	data(){
  	  return {
  	  	items:[
  	  	  {name:'WordCloud', ad:'wordcloud'},
          {
            name:'票房数据', 
            values:[
              {name: '当日票房', ad:'movie_day'},
              {name: '实时票房', ad:'movie_now'}
            ]
          },
  	  	  {name:'Chart3', ad:'ad3'},
  	  	  {name:'Chart4', ad:'ad4'},
  	  	  {name:'Chart5', ad:'ad5'},
  	  	  {name:'Chart6', ad:'ad6'},
  	  	]
  	  }
  	}
  }
</script>

<style scoped>
	a{
		text-decoration: none;
		color: #555;
		font-size: 14pt;
    display: block;
    width: 100%;
	}


</style>